<template>
  <div class="app-container">
    <div class="search">
      <!-- 搜索表单 -->
      <el-form :model="serchForm" ref="formRef">
        <el-row :gutter="20">
          <el-col :span="8"
            ><div class="grid-content ep-bg-purple" />
            <el-form-item label="应用名称" prop="account">
              <el-input
                v-model="serchForm.model.appName"
                placeholder="请输入应用名称"
                style="width: 200px"
              ></el-input> </el-form-item
          ></el-col>

          <el-col :span="8">
            <el-form-item label="上架状态">
              <el-select
                v-model="serchForm.model.appState"
                placeholder="请选择"
              >
                <el-option label="已上架" :value="0"></el-option>
                <el-option label="未上架" :value="1"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <!--重置 搜搜按钮 -->
      <div class="btns">
        <el-button icon="Refresh" @click="handleResetClick">重置</el-button>
        <el-button type="primary" icon="Search" @click="handleQueryClick"
          >查询</el-button
        >
        <el-button type="primary" @click="handleAddClick"
          ><el-icon><Upload /></el-icon>新增</el-button
        >
      </div>
    </div>

    <!-- 表单 -->
    <div class="content">
      <div class="content">
        <div class="table">
          <el-table :data="dataList" border style="width: 100%">
            <el-table-column
              align="center"
              prop="id"
              label="序号"
              width="80px"
            />
            <el-table-column align="center" prop="appName" label="应用名称 " />
            <el-table-column
              align="center"
              prop="appIntroduce"
              label="应用介绍 "
              :show-overflow-tooltip="true"
            />

            <el-table-column
              align="center"
              prop="appArea"
              label="应用服务领域"
              width="250"
            >
              <template #default="scope">
                <span>
                  {{ mapDict(appAreaTypeList, scope.row.appArea) }}
                </span>
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              prop="appType"
              label="应用分类"
              width="180"
            >
              <template #default="scope">
                <span>
                  {{ mapDict(appTypeList, scope.row.appType) }}
                </span>
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              prop="appProvide"
              label="应用提供形式"
              width="180"
            >
              <template #default="scope">
                <span>
                  {{ mapDict(appProvideTypeList, scope.row.appProvide) }}
                </span>
              </template>
            </el-table-column>

            <el-table-column align="center" label="上架状态" width="100">
              <template #default="scope">
                <el-switch
                  v-model="scope.row.appState"
                  :active-value="0"
                  :inactive-value="1"
                  @click="changeShow(scope.row)"
                />
              </template>
            </el-table-column>

            <el-table-column align="center" label="操作" width="200">
              <template #default="scope">
                <el-row>
                  <el-button
                    size="small"
                    type="primary"
                    text
                    @click="handelOpenDetail(scope.row)"
                    >编辑</el-button
                  >

                  <el-popconfirm
                    placement="bottom"
                    title="确认删除吗?"
                    trigger="click"
                    @confirm="handelDelByid(scope.row)"
                  >
                    <template #reference>
                      <el-button type="danger" size="small" text
                        >删除</el-button
                      >
                    </template>
                  </el-popconfirm>

                  <el-button
                    type="primary"
                    size="small"
                    @click="handelLookByid(scope.row)"
                    text
                    >查看</el-button
                  >
                </el-row>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="pagination">
          <el-pagination
            v-model:current-page="serchForm.current"
            v-model:page-size="serchForm.size"
            :page-sizes="[10, 20, 30]"
            layout="->,total,sizes, prev, pager, next, jumper"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </div>
    </div>

    <!-- 对话框 -->
    <el-dialog
      v-model="dialogFormVisible"
      :title="dialogTitle"
      width="70%"
      @close="dialogClose"
      destroy-on-close
    >
      <el-form :model="form" :rules="rules" ref="formEl" :disabled="islook">
        <el-form-item label="应用名称" label-width="110" prop="appName">
          <el-input
            v-model.trim="form.appName"
            autocomplete="off"
            placeholder="请输入应用名称"
            maxlength="50"
            show-word-limit
          />
        </el-form-item>

        <el-form-item label="应用图标" label-width="110" prop="logImg">
          <CustomUpload
            :uploadId="0"
            name="logImg"
            @file-uploaded="handleFileUploaded"
            @file-remove="handleRemove"
            :imglist="form.logImg"
          />
        </el-form-item>

        <el-form-item label="应用图片" label-width="110" prop="applictionFiles">
          <CustomUpload
            :uploadId="0"
            name="applictionFiles"
            @file-uploaded="handleFileUploaded"
            @file-remove="handleRemove"
            :imglist="form.applictionFiles"
          />
        </el-form-item>
        <el-form-item label="应用介绍" label-width="110" prop="appIntroduce">
          <el-input
            v-model.trim="form.appIntroduce"
            type="textarea"
            autocomplete="off"
            placeholder="请填写应用介绍"
            maxlength="9999"
            show-word-limit
          />
        </el-form-item>
        <el-form-item
          label="应用介绍图"
          label-width="110"
          prop="appIntroduceFiles"
        >
          <CustomUpload
            :uploadId="1"
            name="appIntroduceFiles"
            @file-uploaded="handleFileUploaded"
            @file-remove="handleRemove"
            :imglist="form.appIntroduceFiles"
          />
        </el-form-item>
        <el-form-item label="品牌" label-width="110" prop="brandId">
          <el-select v-model="form.brandId" placeholder="请选择">
            <el-option
              v-for="item in brandList"
              :key="item.id"
              :label="item.tenantName"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="应用服务领域" label-width="110" prop="appArea">
          <el-select v-model="form.appArea" placeholder="请选择">
            <el-option
              v-for="item in appAreaTypeList"
              :key="item.id"
              :label="item.label"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="应用分类" label-width="110" prop="appType">
          <el-select v-model="form.appType" placeholder="请选择">
            <el-option
              v-for="item in appTypeList"
              :key="item.id"
              :label="item.label"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="应用提供形式" label-width="110" prop="appProvide">
          <el-select v-model="form.appProvide" placeholder="请选择">
            <el-option
              v-for="item in appProvideTypeList"
              :key="item.id"
              :label="item.label"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="访问链接" label-width="110" prop="appAccess">
          <el-input
            v-model.trim="form.appAccess"
            autocomplete="off"
            placeholder="请填写访问链接"
          />
        </el-form-item>

        <!-- 主要功能 -->
        <div v-for="(item, i) in form.functionFiles" :key="i">
          <el-row :gutter="10">
            <el-col :span="8">
              <el-form-item
                label-width="110"
                :label="i === 0 ? '主要功能' : ''"
                :prop="'functionFiles.' + i + '.title'"
              >
                <el-input
                  v-model="item.title"
                  placeholder="请输入主要功能标题"
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="" :prop="'functionFiles.' + i + '.content'">
                <el-input
                  v-model="item.content"
                  placeholder="请输入主要功能内容"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item
                label=""
                :prop="'functionFiles.' + i + '.file'"
                :rules="{ required: true, message: '必须选择一张图片' }"
              >
                <CustomUpload
                  :limit="1"
                  :uploadId="i"
                  :id="item.id"
                  :name="'functionFiles'"
                  tip="仅支持图片文件：.png .gif .jpg .jpeg 文件大小：10MB"
                  @file-uploaded="handleFileUploaded"
                  @file-remove="handleRemove"
                  :imglist="item.file"
                />
              </el-form-item>
            </el-col>
            <el-col :span="2">
              <el-button
                v-if="i !== 0"
                type="danger"
                @click="dels('functionFiles', item, i)"
                >删除</el-button
              >
            </el-col>
          </el-row>
        </div>
        <el-form-item label-width="110">
          <el-button type="primary" @click="add('functionFiles')"
            >添加主要功能</el-button
          >
        </el-form-item>

        <!-- 主要优势 -->
        <div v-for="(item, i) in form.advantageFiles" :key="i">
          <el-row :gutter="10">
            <el-col :span="8">
              <!-- :rules="{ required: true, message: '必填字段不能为空' }" -->
              <el-form-item
                label-width="110"
                :label="i === 0 ? '主要优势' : ''"
                :prop="'advantageFiles.' + i + '.title'"
              >
                <el-input
                  v-model="item.title"
                  placeholder="请输入主要功能标题"
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="" :prop="'advantageFiles.' + i + '.content'">
                <el-input
                  v-model="item.content"
                  placeholder="请输入主要功能内容"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item
                label=""
                :prop="'advantageFiles.' + i + '.file'"
                :rules="{ required: true, message: '必须选择一张图片' }"
              >
                <CustomUpload
                  :limit="1"
                  :uploadId="i"
                  :id="item.id"
                  :name="'advantageFiles'"
                  tip="仅支持图片文件：.png .gif .jpg .jpeg 文件大小：10MB"
                  @file-uploaded="handleFileUploaded"
                  @file-remove="handleRemove"
                  :imglist="item.file"
                />
              </el-form-item>
            </el-col>
            <el-col :span="2">
              <el-button
                v-if="i !== 0"
                type="danger"
                @click="dels('advantageFiles', item, i)"
                >删除</el-button
              >
            </el-col>
          </el-row>
        </div>
        <el-form-item label-width="110">
          <el-button type="primary" @click="add('advantageFiles')"
            >添加主要优势</el-button
          >
        </el-form-item>

        <!-- 项目案例 -->
        <div v-for="(item, i) in form.casefiles" :key="i">
          <el-row :gutter="10">
            <el-col :span="8">
              <el-form-item
                label-width="110"
                :label="i === 0 ? '项目案例' : ''"
                :prop="'casefiles.' + i + '.title'"
              >
                <el-input
                  v-model="item.title"
                  placeholder="请输入主要功能标题"
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="" :prop="'casefiles.' + i + '.content'">
                <el-input
                  v-model="item.content"
                  placeholder="请输入主要功能内容"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item
                label=""
                :prop="'casefiles.' + i + '.file'"
                :rules="{ required: true, message: '必须选择一张图片' }"
              >
                <CustomUpload
                  :limit="1"
                  :uploadId="i"
                  :id="item.id"
                  :name="'casefiles'"
                  tip="仅支持图片文件：.png .gif .jpg .jpeg 文件大小：10MB"
                  @file-uploaded="handleFileUploaded"
                  @file-remove="handleRemove"
                  :imglist="item.file"
                />
              </el-form-item>
            </el-col>
            <el-col :span="2">
              <el-button
                v-if="i !== 0"
                type="danger"
                @click="dels('casefiles', item, i)"
                >删除</el-button
              >
            </el-col>
          </el-row>
        </div>
        <el-form-item label-width="110">
          <el-button type="primary" @click="add('casefiles')"
            >添加项目案例</el-button
          >
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer" v-if="!islook">
          <el-button @click="dialogFormVisible = false">取消</el-button>
          <el-button type="primary" @click="submitForm">
            {{ edit ? "保存" : "上架" }}
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { reactive, ref, onMounted, computed } from "vue";
import CustomUpload from "@/components/CustomUpload";
import { rules } from "./rules";
import { formatDateTime } from "@/utils/index.js";
import {
  queryAPPListRequest,
  editAPPStatusRequest,
  getAPPByIdRequest,
  deleteAPPByIdRequest,
  deleteAPPGroupByIdRequest,
} from "@/api/appStore/appManagement.js";
import {
  getTypeListRequest,
  getDeteilImgByIdRequest,
} from "@/api/public/index.js";

import { queryListRequest } from "@/api/frontUser/firmUser.js";

import { ElMessage, ElLoading } from "element-plus";

const total = ref(0);

const serchForm = reactive({
  current: 1,
  size: 10,
  model: {
    appName: "",
    appState: "",
  },
});

onMounted(() => {
  getList();

  getTypeList();

  getBrandList();
});

let appTypeList = ref([]); //应用分类字典 3
let appAreaTypeList = ref([]); //应用服务领域字典 4
let appProvideTypeList = ref([]); //应用提供形式字典 5

//写一个映射方法，传入一个数组和一个参数  映射出这个参数的name
const mapDict = (dict, id) => {
  return dict.find((item) => item.id == id)?.label;
};
//获取字典
const getTypeList = async () => {
  //使用promiseall 请求三个字典
  const res = await Promise.all([
    getTypeListRequest({ size: 999, model: { type: 3 } }),
    getTypeListRequest({ size: 999, model: { type: 4 } }),
    getTypeListRequest({ size: 999, model: { type: 5 } }),
  ]);
  appTypeList.value = res[0].data.records;
  appAreaTypeList.value = res[1].data.records;
  appProvideTypeList.value = res[2].data.records;
  console.log(res);
};

// 列表数据
const dataList = ref([]);
async function getList() {
  const res = await queryAPPListRequest(serchForm);
  console.log(res);
  dataList.value = res.data.records;
  total.value = res.data.total;
}

//获取品牌
const brandList = ref([]);
async function getBrandList() {
  const res = await queryListRequest({
    current: 1,
    size: 999,
    model: { status: 3 },
  });
  brandList.value = res.data.records;
}

//重置操作
function handleResetClick() {
  console.log("reset");
  serchForm.current = 1;
  serchForm.size = 10;
  serchForm.model = {
    appName: "",
    appState: "",
  };
  getList();
}
//查询按钮操作
function handleQueryClick() {
  serchForm.current = 1;
  console.log("handleQueryClick", serchForm);
  getList();
}

//分页器size事件
const handleSizeChange = (size) => {
  serchForm.size = size;
  getList();
};
//分页器current事件
const handleCurrentChange = (current) => {
  serchForm.current = current;
  getList();
};

//状态改变事件
async function changeShow(row) {
  // return;
  const { appState, id } = row;
  // const data = {
  //   id,
  //   appState,
  // };
  const formData = new FormData();
  formData.append("id", id);
  formData.append("appState", appState);
  const res = await editAPPStatusRequest(formData);
  console.log(res);
  if (res.code === 200) {
    ElMessage.success("状态修改成功！");
    getList();
  }
}

//删除操作
async function handelDelByid(row) {
  const { id } = row;
  console.log(id);
  const res = await deleteAPPByIdRequest(id);
  if (res.data) {
    ElMessage.success("删除成功！");
    getList();
  }
}
//关闭dialog
function dialogClose() {
  islook.value = false;
  form = reactive({
    appName: "", //应用名称

    logImg: [], //应用logo
    delLogImgs: "", //要删除的logo
    applictionFiles: [], //应用图片
    delThumbnails: "", //要删除的缩略图id

    appIntroduce: "", //应用介绍
    appIntroduceFiles: [], //应用介绍图
    delAppIntroduceIds: "", //要删除的应用介绍图id

    appArea: "", //应用服务领域
    appType: "", //应用分类
    appProvide: "", //应用提供形式
    appAccess: "", //访问链接

    appFunctionIds: "", //主要功能图片id 1
    functionFiles: [
      {
        title: "",
        content: "",
        file: [],
      },
    ],
    delFunctionIds: [], //删除的图片id

    appAdvantageIds: "", //主要优势图片id 2
    //主要优势图片
    advantageFiles: [
      {
        title: "",
        content: "",
        file: [],
      },
    ],
    delAdvantageIds: [], //删除的图片id

    appCaseIds: "", //项目案例的id  3
    //项目案例图片
    casefiles: [
      {
        title: "",
        content: "",
        file: [],
      },
    ],
    delCaseIds: [], //删除的图片id  项目案例

    appState: 0, //状态
  });
}

//是否编辑状态
let edit = ref(false);
//新增编辑dialog
let dialogFormVisible = ref(false);
let form = reactive({
  appName: "", //应用名称

  logImg: [], //应用logo
  delLogImgs: "", //要删除的logo
  applictionFiles: [], //应用图片
  delThumbnails: "", //要删除的缩略图id

  appIntroduce: "", //应用介绍
  appIntroduceFiles: [], //应用介绍图
  delAppIntroduceIds: "", //要删除的应用介绍图id

  brandId: "", //企业

  appArea: "", //应用服务领域
  appType: "", //应用分类
  appProvide: "", //应用提供形式
  appAccess: "", //访问链接

  appFunctionIds: "", //主要功能图片id 1
  functionFiles: [
    {
      title: "",
      content: "",
      file: [],
    },
  ],
  delFunctionIds: [], //删除的图片id

  appAdvantageIds: "", //主要优势图片id 2
  //主要优势图片
  advantageFiles: [
    {
      title: "",
      content: "",
      file: [],
    },
  ],
  delAdvantageIds: [], //删除的图片id

  appCaseIds: "", //项目案例的id  3
  //项目案例图片
  casefiles: [
    {
      title: "",
      content: "",
      file: [],
    },
  ],
  delCaseIds: [], //删除的图片id  项目案例

  appState: 0, //状态
});
//新增操作
async function handleAddClick() {
  dialogTitle.value = "新增";
  edit.value = false;
  dialogFormVisible.value = true;
}

let dialogTitle = ref("");
//  编辑操作
let editid = ref("");
async function handelOpenDetail(row) {
  dialogTitle.value = "编辑";
  edit.value = true;
  const { id } = row;
  editid.value = id;
  console.log(id);
  dialogFormVisible.value = true;
  // const res = await getAPPByIdRequest(id);

  form.id = row.id;
  form.appName = row.appName;

  form.logImg = row.logImg.map((item) => {
    return {
      name: item.name,
      id: item.id,
      url: item.path,
    };
  });

  form.applictionFiles = row.thumbnail.map((item) => {
    return {
      name: item.name,
      id: item.id,
      url: item.path,
    };
  });
  form.appIntroduce = row.appIntroduce;
  form.appIntroduceFiles = row.appIntroduceList.map((item) => {
    return {
      name: item.name,
      id: item.id,
      url: item.path,
    };
  });

  form.appArea = parseInt(row.appArea);
  form.appType = parseInt(row.appType);
  form.appProvide = parseInt(row.appProvide);
  form.appAccess = row.appAccess;

  form.brandId = row.brandId;

  form.functionFiles = mapImgUrl(row.funtionList);
  form.advantageFiles = mapImgUrl(row.advantageList);
  form.casefiles = mapImgUrl(row.caseList);

  form.appFunctionIds = "";
  form.appAdvantageIds = "";
  form.appCaseIds = "";

  console.log(form);
}
function mapImgUrl(list) {
  return list.map((item) => {
    return {
      title: item.title,
      content: item.content,
      id: item.id,
      fileIds: item.imageId,
      file: [
        {
          name: item.imageName,
          id: item.imageId,
          url: item.imagePath,
        },
      ],
    };
  });
}

//查看操作
let islook = ref(false);
async function handelLookByid(row) {
  dialogTitle.value = "查看";
  islook.value = true;
  const { id } = row;
  console.log(id);
  dialogFormVisible.value = true;
  // const res = await getAPPByIdRequest(id);
  console.log(row);
  form.id = row.id;
  form.appName = row.appName;

  form.logImg = row.logImg.map((item) => {
    return {
      name: item.name,
      id: item.id,
      url: item.path,
    };
  });
  form.applictionFiles = row.thumbnail.map((item) => {
    return {
      name: item.name,
      id: item.id,
      url: item.path,
    };
  });
  form.appIntroduce = row.appIntroduce;
  form.appIntroduceFiles = row.appIntroduceList.map((item) => {
    return {
      name: item.name,
      id: item.id,
      url: item.path,
    };
  });

  form.appArea = parseInt(row.appArea);
  form.appType = parseInt(row.appType);
  form.appProvide = parseInt(row.appProvide);
  form.appAccess = row.appAccess;

  form.brandId = row.brandId;

  form.functionFiles = mapImgUrl(row.funtionList);
  form.advantageFiles = mapImgUrl(row.advantageList);
  form.casefiles = mapImgUrl(row.caseList);

  form.appFunctionIds = "";
  form.appAdvantageIds = "";
  form.appCaseIds = "";

  console.log(form);
}

const formEl = ref(null);
//提交表单
const submitForm = () => {
  formEl.value.validate(async (valid, fields) => {
    if (valid) {
      console.log(valid);

      //根据edit判断是上传还是编辑
      if (!edit.value) {
        // 新增
        //开始处理提交表单
        const formData = new FormData();
        //循环form对象 给formData 且key有可能是数组的情况下 循环数组append
        for (const key in form) {
          if (form[key] instanceof Array) {
            if (
              key === "functionFiles" ||
              key === "advantageFiles" ||
              key === "casefiles"
            ) {
              for (let i = 0; i < form[key].length; i++) {
                for (const key1 in form[key][i]) {
                  if (form[key][i][key1] instanceof Array) {
                    for (let j = 0; j < form[key][i][key1].length; j++) {
                      formData.append(`${key}`, form[key][i][key1][j].raw);
                    }
                  } else {
                    let arr = {
                      functionFiles: "functionTitle",
                      advantageFiles: "advantageTitle",
                      casefiles: "caseTitle",
                    };
                    if (form[key][i][key1]) {
                      formData.append(
                        `${arr[key]}[${i}].${key1}`,
                        form[key][i][key1]
                      );
                    } else {
                      formData.append(`${arr[key]}[${i}].${key1}`, "     ");
                    }
                  }
                }
              }
              continue;
            }
            for (let i = 0; i < form[key].length; i++) {
              formData.append(key, form[key][i].raw);
              console.log(key, form[key][i]);
            }
          } else {
            formData.append(key, form[key]);
          }
        }
        //获取formData里所有的参数 打印出来
        console.log(formData);
        const loading = ElLoading.service({
          lock: true,
          text: "上传中...",
          background: "rgba(0, 0, 0, 0.7)",
        });

        try {
          const res = await editAPPStatusRequest(formData);
          if (res.data) {
            ElMessage.success("上架成功！");
            dialogFormVisible.value = false;
            getList();
          }
          loading.close();
        } catch (error) {
          loading.close();
        }
      } else {
        // 编辑

        //开始处理提交表单
        const formData = new FormData();
        formData.append("id", editid.value);
        //循环form对象 给formData 且key有可能是数组的情况下 循环数组append
        for (const key in form) {
          if (form[key] instanceof Array) {
            if (
              key === "functionFiles" ||
              key === "advantageFiles" ||
              key === "casefiles"
            ) {
              for (let i = 0; i < form[key].length; i++) {
                for (const key1 in form[key][i]) {
                  if (form[key][i][key1] instanceof Array) {
                    for (let j = 0; j < form[key][i][key1].length; j++) {
                      // formData.append(`${key}`, form[key][i][key1][j].raw);
                      // console.log(form[key][i][key1][j]);
                      if (form[key][i][key1][j].status === "ready") {
                        formData.append(`${key}`, form[key][i][key1][j].raw);
                      }
                    }
                  } else {
                    let arr = {
                      functionFiles: "functionTitle",
                      advantageFiles: "advantageTitle",
                      casefiles: "caseTitle",
                    };
                    formData.append(
                      `${arr[key]}[${i}].${key1}`,
                      form[key][i][key1]
                    );
                  }
                }
              }
              continue;
            }

            for (let i = 0; i < form[key].length; i++) {
              if (!form[key][i]) {
                continue;
              }
              if (form[key][i].status && form[key][i].status === "ready") {
                formData.append(key, form[key][i].raw);
              }
              if (
                key === "delFunctionIds" ||
                key === "delAdvantageIds" ||
                key === "delCaseIds"
              ) {
                formData.append(`${key}[${i}].id`, form[key][i].id);
                formData.append(`${key}[${i}].files`, form[key][i].files);
              }
            }
          } else {
            if (form[key]) {
              formData.append(key, form[key]);
            }
          }
        }
        //获取formData里所有的参数 打印出来
        console.log(formData);
        const loading = ElLoading.service({
          lock: true,
          text: "上传中...",
          background: "rgba(0, 0, 0, 0.7)",
        });
        try {
          const res = await editAPPStatusRequest(formData);
          if (res.data) {
            ElMessage.success("修改成功");
            dialogFormVisible.value = false;
            getList();
          }
          loading.close();
        } catch (error) {
          loading.close();
        }
      }
    } else {
      console.log(fields);
    }
  });
};

//图片上传事件
const handleFileUploaded = (data) => {
  console.log(data);

  if (data.name === "applictionFiles") {
    form.applictionFiles = data.fileData;
  } else if (data.name === "appIntroduceFiles") {
    form.appIntroduceFiles = data.fileData;
  } else if (data.name === "logImg") {
    form.logImg = data.fileData;
  } else {
    form[data.name][data.uploadId].file = data.fileData;
  }

  formEl.value.validate((valid) => {});
};
//图片移除事件
const handleRemove = (data) => {
  console.log(data);

  if (!data.fileData.id) {
    return;
  }
  switch (data.name) {
    case "logImg":
      form.delLogImgs +=
        form.delLogImgs.length > 1 ? "," + data.fileData.id : data.fileData.id;
      break;
    case "applictionFiles":
      form.delThumbnails +=
        form.delThumbnails.length > 1
          ? "," + data.fileData.id
          : data.fileData.id;

      break;
    case "appIntroduceFiles":
      form.delAppIntroduceIds +=
        form.delAppIntroduceIds.length > 1
          ? "," + data.fileData.id
          : data.fileData.id;
      break;
    case "functionFiles":
      form.delFunctionIds[data.uploadId] = {};
      form.delFunctionIds[data.uploadId].id = data.id;
      form.delFunctionIds[data.uploadId].files = data.fileData.id;
      form.functionFiles[data.uploadId].fileIds = "";
      break;
    case "advantageFiles":
      form.delAdvantageIds[data.uploadId] = {};
      form.delAdvantageIds[data.uploadId].id = data.id;
      form.delAdvantageIds[data.uploadId].files = data.fileData.id;
      form.advantageFiles[data.uploadId].fileIds = "";
      break;
    case "casefiles":
      form.delCaseIds[data.uploadId] = {};
      form.delCaseIds[data.uploadId].id = data.id;
      form.delCaseIds[data.uploadId].files = data.fileData.id;
      form.casefiles[data.uploadId].fileIds = "";
      break;
  }
};

function add(name) {
  form[name].push({
    title: "",
    content: "",
    file: [],
  });
}
async function dels(name, item, i) {
  console.log(item);
  if (form[name].indexOf(item) > -1) {
    form[name].splice(i, 1);
  }
  const res = await deleteAPPGroupByIdRequest([item.id]);
  console.log(res);
}
</script>
<style scoped>
label {
  font-weight: 0 !important;
}
.search {
  background-color: #fff;
  padding: 20px;
}
.search .btns {
  text-align: right;
  padding: 0 50px 10px 0;
}
.pagination {
  margin-top: 14px;
}
.avatar-uploader-icon {
  width: 100px;
  height: 100px;
}
</style>
